<template>
  <Layout>
    <SliderContent
      :slider-title="$t('ProductCategories')"
      :content-nav="'> ' + $t('Products') + ' > 产品详情'"
    >
      <template #slider>
        <Tree :data="treeData" @click="handleClickItem"></Tree>
      </template>
      <template #content>
        <div class="product-info" v-if="detail">
          <div class="produce-cover">
            <img :src="detail.pic" alt="" />
          </div>
          <h2 class="product-name">
            {{ detail.name }}
          </h2>
        </div>
        <div
          class="article-content"
          v-for="item in contentDetail"
          v-html="item.content"
        ></div>
        <!-- <div class="article-content" v-html="content"></div> -->
      </template>
    </SliderContent>
  </Layout>
</template>

<script setup>
import Layout from "@/components/Layout.vue";
import SliderContent from "@/components/SliderContent.vue";
import Tree from "@/components/Tree.vue";
import { computed, onBeforeMount, onMounted, ref } from "vue";
import { DoubleRightOutlined } from "@ant-design/icons-vue";
import { getClassify, getProductDetail } from "@/api/home";
const treeData = ref([]);

const id = ref("");
const detail = ref(null);
const content = ref("");

onBeforeMount(() => {
  const params = new URLSearchParams(window.location.search);
  id.value = params.get("id");
  getProductDetail(id.value).then((res) => {
    detail.value = res.product;
  });
  getClassify().then((res) => {
    treeData.value = res.data;
  });
});

const contentDetail = computed(() => {
  try {
    const contentList = JSON.parse(detail.value.detail);
    console.log(contentList)
    return contentList;
  } catch (e) {
    return [];
  }
});

const handleClickItem = (classify) => {
  window.location.href = "/?cid=" + classify.id;
};
</script>

<style lang="less">
.product-info {
  margin-bottom: 15px;
  padding-bottom: 15px;
  display: flex;
  align-items: center;
  // prettier-ignore
  border-bottom: 1PX solid #e5e5e5;
}

.product-name {
  padding: 10px;
  font-weight: 700;
  font-size: 12px;
  color: #1a1a1a;
  line-height: 1.5;
}
.produce-cover {
  width: 80px;
  height: 80px;
  min-width: 80px;
  border-radius: 2px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}
.article-content {
  font-size: 7px;
  line-height: 1.5;
  // prettier-ignore
  border: 1PX solid #e5e5e5;

  .pic-item {
    font-size: 0;
    line-height: 0;
    padding: 0;
    margin: 0;
    img {
      width: 100%;
      height: auto;
    }
  }
}
</style>
